<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>登录页面</title>
</head>

<body>
    <form class="layui-form app_login" action="" style="width: 30%;margin: auto;padding-top: 100px;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                    class="layui-input louser">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-block">
                <input type="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                    class="layui-input lopwd">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="formDemo">立即提交</button>
                <a href="./reguser.html">没有账号？</a>
            </div>
        </div>
    </form>

</body>

</html>
<script src="./layui/layui.js"></script>
<script src="./js/jquery-3.6.1.min.js"></script>
<script>
    $('.app_login').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '/api/login',
            data: {
                username: $('.louser').val(),
                password: $('.lopwd').val(),
            },
            success: (res) => {
                if (res.status == 1) {
                    layer.msg(res.message);
                }
                if (res.status == 0) {
                    //登录成功保存token
                    localStorage.setItem('token', res.token);
                    window.location.href = './index.html'
                }
            }
        })
    })
</script>